<template>
	<view class="main">
		<view class="amount">
			<view class="title">账户余额提现到微信</view>
			<view class="how">
				<labe>￥</labe>
				<input type="number" v-model="remoney" value="" />
			</view>
			<view class="y_money">
				<view class="money_l">
					账户余额￥{{money}}
				</view>
				<view class="money_r">
					提现记录
				</view>
			</view>
		</view>
		<view class="button" @click="falg()">
			提现到微信
		</view>
		<view class="record" v-for="(item,index) in withdrawinfo" :key="index">
			<view class="total_money">
				￥{{item.money}}
			</view>
			<view class="withdraw">
				<view>
					{{item.create_time}} 提现
				</view>
				<view>
					{{item.estimate_time}} {{item.status_name}}
				</view>
			</view>
		</view>
		<!-- 弹出层 -->
		<u-popup v-model="show" mode="bottom" border-radius="20">
			<view class="zhezhao">
				<view class="top">
					<view class="selected" @click="close()">
						选择到银行卡
					</view>
					<view class="change">
						编辑
					</view>
				</view>
				<view :class="bank_list.length==0?'card':'cared'">
					<block v-if="bank_list.length">
						<view class="numcard" v-for="(item,bank) in bank_list" :key="bank">
							<text>{{item.bank_name}}</text>
							<view class="radio-content">
								<view class="radio-content" @click="changeRadio(bank)">
									<view class="radio" :class="radio1 == bank? 'radio-default':''">
										<view :class="radio1 == bank? 'radio-active':''"></view>
									</view>
								</view>
							</view>
						</view>
					</block>
					<block class="notcard" v-else>
						---您还没有添加银行卡---
					</block>
				</view>
				<view class="changecard">
					<text>使用新卡提现</text>
					<u-icon name="arrow-right" color="#CCCCCC " size="28"></u-icon>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: '1', //当前页数
				limit: '10', //展示数量
				money: '', //余额
				show: false,
				radio1: null,
				bank_list: [], //骑手存在的银行信息
				remoney: '', //提现金额
				bankinfo: '', //选取的引号信
				withdrawinfo: '', //提现记录
			}
		},
		onLoad() {},
		onShow() {
			this.balance()
			this.bank_lists()
			this.withdraw()
		},
		methods: {
			//改变radio
			changeRadio(index) {
				console.log(index);
				this.radio1 = index;
				console.log(this.bank_list[index]);
			},
			falg() {
				if (this.remoney == "") {
					uni.showToast({
						title: '请输入提现金额',
						icon: "none",
						mask: true,
						duration: 1000
					})
				} else if (this.bankinfo == "") {
					this.show = !this.show
				} else {
					global.$http.request({
						url: '/api/rider_user/withdraw_money',
						data: {
							token: uni.getStorageSync('token'),
							money: this.remoney,
							bid: this.bankinfo.id,
							type: 1,
						}
					}).then(res => {
						if (res.data.code == 0) {
							uni.showToast({
								title: '提现成功',
								icon: "none",
								mask: true,
								duration: 1000
							})
						} else {
							uni.showToast({
								title: '信息有误',
								icon: "none",
								mask: true,
								duration: 1000
							})
						}
						// 
					})
				}
			},
			//骑手余额记录
			balance() {
				global.$http.request({
					url: '/api/rider_user/money_log',
					data: {
						token: uni.getStorageSync('token'),
						page: this.page,
						limit: this.limit,
					}
				}).then(res => {
					// console.log(res.data.data);
					// console.log('余额' + res.data.data[res.data.data.length - 1].now_money);
					this.money = res.data.data[res.data.data.length - 1].now_money
				})
			},
			//提现记录
			withdraw() {
				global.$http.request({
					url: '/api/rider_user/withdraw_log',
					data: {
						token: uni.getStorageSync('token'),
					}
				}).then(res => {
					// console.log(res.data.data);
					this.withdrawinfo = res.data.data
				})
			},

			//银行卡
			bank_lists() {
				// console.log("银行");
				global.$http.request({
					url: '/api/rider_user/rider_bank',
					data: {
						token: uni.getStorageSync('token'),
					}
				}).then(res => {
					this.bank_list = res.data.data
					// console.log(this.bank_list);
				})
			},
			//关闭弹窗
			close() {
				if (this.radio1 == null) {
					this.show = true
					uni.showToast({
						title: '请先选择银行卡',
						icon: "none",
						mask: true,
						duration: 1000
					})
				} else {
					// console.log(this.bank_list[this.radio1]);
					this.bankinfo = this.bank_list[this.radio1]
					this.show = false
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		font-family: PingFang SC;
		background-color: #f7f7f7;

		.main {

			margin-top: 24rpx;
			width: 750rpx;

			.radio-content {
				height: 40rpx;
				display: flex;
				align-items: center;
			}

			.radio {
				width: 24rpx;
				height: 24rpx;
				border-radius: 50%;
				border: 2rpx solid #CCCCCC;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin: 0rpx 26rpx 0rpx 15rpx;
			}

			.radio-active {
				width: 16rpx;
				height: 16rpx;
				border-radius: 50%;
				background-color: #F3444B;
			}

			.radio-default {
				border: 2rpx solid #0fbda6;
			}

			.radio-right {
				margin-left: 66rpx;
			}

			.amount {
				margin-top: 24rpx;
				width: 700rpx;
				margin: 0 auto;
				// height: 300rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 10rpx 13rpx 0rpx rgba(0, 0, 0, 0.08);
				border-radius: 15rpx;

				.title {
					padding: 29rpx 0 0 50rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: #999999;
				}

				.how {
					display: flex;
					font-size: 72rpx;
					font-weight: bold;
					color: #000000;
					width: 600rpx;
					margin: 80rpx auto 0 auto;
					border-bottom: 2rpx solid #CCCCCC;
					padding: 19rpx 0;

					input {
						height: 100rpx;
						padding-left: 20rpx;
					}
				}

				.y_money {
					margin: 41rpx 31rpx 41rpx 50rpx;
					display: flex;
					padding-bottom: 20rpx;
					justify-content: space-between;
					align-items: center;

					.money_l {
						width: 50%;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-size: 28rpx;
						font-weight: 400;
						color: #999999;
						padding-top: 35rpx;
					}

					.money_r {
						padding: 29rpx 10rpx 0 0rpx;
						font-size: 28rpx;
						font-weight: bold;
						color: #4492FF;
					}

				}
			}

			.button {
				width: 690rpx;
				margin: 0 auto 66rpx auto;
				background: #1DBE61;
				border-radius: 48rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
				padding: 33rpx 0;
			}

			.record {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 0 50rpx;
				border-top: 2rpx solid #CCCCCC;
				;
				padding: 31rpx 0 29rpx 0;

				.total_money {
					font-size: 30rpx;
					font-weight: bold;
					color: #000000;
				}

				.withdraw {
					font-size: 28rpx;
					font-weight: 400;
					color: #999999;

					view {
						padding-top: 17rpx;
					}
				}
			}

			.zhezhao {
				padding: 34rpx 0rpx 55rpx 0rpx;

				.top {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 32rpx;
					font-weight: 400;
					color: #000000;
					padding: 0 20rpx;

					.selected {}

					.change {}
				}

				.card {
					padding: 38rpx 0;

					.numcard {
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 26rpx;
						font-weight: bold;
						color: #576B95;
						padding: 38rpx 20rpx;
						border-top: 2rpx solid #CCCCCC;

						radio {
							color: #F3444B;
						}
					}
				}

				.cared {
					padding: 38rpx 0;
					text-align: center;
					color: #999999;
				}

				.changecard {
					padding: 38rpx 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}
		}
	}
</style>
